// 基本资料
<template>
  <div class="BasicInfo">
    <p class="MemberID">
      会员号：
      <span>
        {{ MemberID }}
        <i style="color:#c1c1c1">（系统自动生成）</i>
      </span>
    </p>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm1"
    >
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
<!-- 
      <el-form-item label="性别：" prop="resource">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item> -->

      <!-- <el-form-item label="职业部门：" prop="region">
        <el-select v-model="department_id" placeholder="请选择职业部门">
          <el-option
            v-for="item in ruleForm.region"
            :key="item.id"
            :label="item.cate_title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item label="上传头像：" prop="HeadPortrait">
        <el-upload
          action=""
          :auto-upload="false"
          list-type="picture-card"
          ref="upload1"
          :limit="1"
          :on-progress="base64"
          :on-exceed="onExceed"
          accept="image/jpeg, image/jpg, image/png"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <p class="tips" style="color: #f40; font-size:12px; text-align: left; ">*上传图片不得超过2M</p>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt>
        </el-dialog>
      </el-form-item> -->

      <el-form-item>
        <el-button
          type="warning"
          @click="submitForm1('ruleForm')"
          size="mini"
          :disabled="disabled1"
        >保 存</el-button>
      </el-form-item>
    </el-form>
    <p class="Tips" @click="changesjump()" v-if="upgradeShow">
      <i>*</i>
      温馨提示 : 升级为企业用户 价格更优惠
      <i>
        <bdi class="animated flash">升级 >></bdi>
      </i>
    </p>
  </div>
</template>
<script>
// import  image from '../../../assets/images/title.png'
export default {
  name: "BasicData",
  data() {
    return {
      // department_id:'', // 部门ID存储 
      upgradeShow: null,  // 升级为企业用户是否显示
      // 基本资料
      dialogVisible: false, // 拉起上传图片的开关
      dialogImageUrl: "", // 上传图片时候的临时路径
      disabled1: false, // 保存按钮是否能够点击
      MemberID: "", // 会员号
      ruleForm: {
        name: "",
        // sex: "",
        // region: "", // 职业部门
        HeadPortrait: "" // 头像
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // region: [
        //   { required: true, message: "请选择选择职业部门", trigger: "blur" }
        // ]
      }
    }
  },

  methods: {

    // 获取是否为企业用户
    async upgradeShows() {
      let user_id = this.$store.state.UserInfor.user_id
      let res = await this.$http({
        method: 'post',
        url: '/api/index/web/doSelfInfos',
        data: {
          user_id
        }
      })
      console.log(res)
      if (res.data.State.Code == '2018') {  //未关联公司
        this.upgradeShow = true
      } else if (res.data.State.Code == '2003') { //已关联公司
        this.upgradeShow = false
      }
    },
    // 升级按钮
    changesjump() {
      this.$emit("upgrade")
    },

    // 图片超过限定数量的钩子函数
    // onExceed(files, fileList) {
    //   this.$message({
    //     message: "温馨提示:上传图片最多为一张 请勿重复点击...",
    //     type: "warning"
    //   })
    // },
    // base64 头像
    // base64(event, file, fileList) {
    //   this.ruleForm.HeadPortrait = this.imgbase64(file.url)
    // },

    // 实验开始   
    // base64() {
    //   let url = document.getElementsByClassName('el-upload-list__item-thumbnail')[0].src
    //   this.ruleForm.HeadPortrait = this.imgbase64(url)
    // },
    // 实验结束

    // 数据更新
    // async dataInit() {
    //   let _info = this.$store.state.UserInfor
    //   // console.log(_info)
    //   this.MemberID = _info.user_id
    //   // this.ruleForm.name = _info.username
    //   // 职业部门
    //   this.$http("/api/index/common/getDepartment")
    //     .then(res => {
    //       let DATA = res.data
    //       if (DATA.State.Code == 200) {
    //         this.ruleForm.region = DATA.data
    //         console.log(region)
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    // 获取个人资料
    async receiveInfor() {
      let user_id = this.$store.state.UserInfor.user_id
      let status = "user"
      try {
        let infor = await this.$http({
          method: "post",
          url: "/api/index/web/doSelfInfos",
          data: {
            user_id,
            status
          }
        })
        const myInfor = infor.data
        if (myInfor.State.Code == 200) {
          console.log(myInfor.data)
          this.$store.commit("HeadPortrait", myInfor.data.avatar)
          this.$store.commit("UserName", myInfor.data.name)
          this.ruleForm.name = myInfor.data.name
          // this.department_id = myInfor.data.department_id
          // if (myInfor.data.sex == "男") {
          //   this.ruleForm.sex = "1"
          // } else {
          //   this.ruleForm.sex = "2"
          // }
        }else if(myInfor.State.Code == '2027'){
          this.$message.error('未关联部门');
        }
      } catch (error) {
        console.log("获取个人资料接口出现了问题...")
      }
    },

    // 基本资料的提交
    async submitForm1(formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid)
        if (valid) {
          // this.base64()
          let user_id = this.$store.state.UserInfor.user_id
          let status = "userUpdate"
          let param = {}
          let avatar = this.$store.state.HeadPortrait // 老头像
          param.name = this.ruleForm.name // 姓名
          // param.sex = this.ruleForm.sex // 性别
          // param.department_id = this.department_id // 职业部门id
          // param.avatar = this.ruleForm.HeadPortrait // 新头像
          console.log(user_id,avatar, status, param)
          try {
            this.$http({
              method: "post",
              url: "/api/index/web/doSelfInfos",
              data: {
                // avatar,
                user_id,
                status,
                param
              }
            })
              .then(res => {
                console.log(res)
                if (res.data.State.Code == 200) {
                  this.$notify({
                    title: "成功",
                    message: "修改资料申请已经提交...",
                    type: "success"
                  })
                  this.disabled1 = true
                }
              })
              .catch(err => {
                console.log(err)
              })
          } catch (error) {
            console.log("个人基本资料的提交接口出现问题...")
          }
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },

    // // 删除上传的图片
    // async handleRemove(file, fileList) {
    //   console.log(file, fileList)
    // },

    // // 图片预览营业执照
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url
    //   this.dialogVisible = true
    // }

    // 基本信息 企业信息 账户安全 切换
  },

  mounted() {
    this.receiveInfor()
    // this.dataInit()
    this.upgradeShows()
  }
}
</script>
<style lang="scss" scoped>
// 基本资料
.BasicInfo {
  padding: 40px 0px;
  color: #666666;
  .Tips {
    font-size: 12px;
    color: #8c939d;
    text-align: center;
    cursor: pointer;
    i {
      color: #ff0000;
      cursor: pointer;
      bdi {
        display: inline-block;
        // animate-duration: 2s; /*动画持续时间*/
        // animate-delay: 5s; /*动画延迟时间*/
        // animation-iteration-count: infinite; /*动画执行次数*/
      }
    }
  }
  .MemberID {
    padding-left: 317px;
    line-height: 50px;
    span {
      padding-left: 12px;
    }
  }
  /deep/ .el-form {
    width: 400px;
    margin: auto;
    .avatar-uploader {
      /deep/ .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-left: 118px;
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
      }
      /deep/ .el-upload:hover {
        border-color: #409eff;
      }
    }
    .el-button {
      margin-left: 72px;
      margin-top: 20px;
    }
  }
}
</style>

